<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>空气质量监测信息库</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .container {
            width: 55%; /* 根据需要调整表格的宽度 */
        }

        .header {
            text-align: center;
            margin-bottom: 20px;
        }

        .title {
            font-size: 35px;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .add-button {
            margin-top: 10px;
            margin-left: 200px;
            font-size: 25px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin: 0 auto; /* 水平居中表格 */
        }

        th, td {
            border: 1px solid #ddd; /* 表格边框样式 */
            padding: 8px;
            text-align: left; /* 单元格内容居左 */
        }

        th {
            background-color: #ADD8E6; /* 表头背景颜色 */
            font-weight: bold; /* 字体加粗 */
            vertical-align: middle; /* 垂直居中表头文字 */
            text-align: center; /* 水平居中文本（可选） */
        }

        td {
            vertical-align: middle; /* 垂直居中单元格内容 */
        }

        tr:nth-child(even) {
            background-color: #90EE90; /* 偶数行背景颜色 */
        }

        tr:nth-child(odd) {
            background-color: #FFFFFF; /* 单数行背景颜色 */
        }

        th, td {
            border: 1px solid #ddd; /* 表格边框样式 */
            padding: 8px;
            text-align: left; /* 单元格内容居左 */
            vertical-align: middle; /* 垂直居中单元格内容 */
            white-space: nowrap;
        }

        th {
            background-color: #ADD8E6; /* 表头背景颜色 */
            font-weight: bold; /* 字体加粗 */
            vertical-align: middle; /* 垂直居中表头文字 */
            text-align: center; /* 水平居中文本 */
        }

        #pagination {
            display: flex;
            justify-content: center; /* 居中分页导航栏 */
            margin-top: 20px; /* 添加一些顶部间距 */
        }

        #pagination ul {
            list-style-type: none;
            display: flex;
        }

        #pagination button,
        #pagination span {
            cursor: pointer;
            margin-right: 10px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="container">
    <div class="header"> <!-- 新的 div 用于定位 -->
        <h1 class="title">空气质量监测信息库</h1>
        <div class="add-button">
            <a href="addAirQuality.jsp">添加空气质量信息</a>
        </div>
    </div>
    <table id="monitor-table">
        <thead>
        <tr>
            <th>序号</th>
            <th>区域</th>
            <th>监测时间</th>
            <th>PM10数据</th>
            <th>PM2.5数据</th>
            <th>监测站</th>
        </tr>
        </thead>
        <tbody id="table-body">
        <!-- 表格内容将由JavaScript动态生成 -->
        </tbody>
    </table>
    <!-- 分页导航栏 -->
    <nav id="pagination">
        <ul>
            <li><button id="first-page">首页</button></li>
            <li><button id="prev-page">上一页</button></li>
            <li><span id="current-page">1</span>/<span id="total-pages">1</span></li>
            <li><button id="next-page">下一页</button></li>
            <li><button id="last-page">尾页</button></li>
            <li><span id="total-count">共0条</span></li>
        </ul>
    </nav>
</div>

<script>
    $(document).ready(function () {
        function renderTable(data, currentPage, totalPages) {
            const tableBody = $('#table-body');
            tableBody.empty(); // 清空现有的表格数据

            data.forEach(function (item, index) {
                const monitorTimeFormatted = formatMonitorTime(item.monitorTime);

                const row = `
                <tr>
                    <td>${index + 1}</td> <!-- 序号从 1 开始 -->
                    <td><a href="https://www.weather.com.cn/">${item.district ? item.district.name : '未知区域'}</a></td>
                    <td>${monitorTimeFormatted}</td>
                    <td>${item.pm10}</td>
                    <td>${item.pm2_5}</td>
                    <td>${item.monitoringStation}</td>
                </tr>
            `;
                tableBody.append(row);
            });

            // 更新分页导航栏状态
            const pagination = document.getElementById('pagination');
            const totalCountSpan = document.getElementById('total-count');
            totalCountSpan.textContent = `共${data.length}条`;

            const currentPageSpan = document.getElementById('current-page');
            currentPageSpan.textContent = `${currentPage}`;

            const totalPageSpan = document.getElementById('total-pages');
            totalPageSpan.textContent = `${totalPages}`;

            const firstPageButton = document.getElementById('first-page');
            const prevPageButton = document.getElementById('prev-page');
            const nextPageButton = document.getElementById('next-page');
            const lastPageButton = document.getElementById('last-page');

            firstPageButton.disabled = currentPage === 1;
            prevPageButton.disabled = currentPage === 1;
            nextPageButton.disabled = currentPage === totalPages;
            lastPageButton.disabled = currentPage === totalPages;
        }

        function formatMonitorTime(timeString) {
            const date = new Date(timeString);
            const year = date.getFullYear();
            const month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的，因此需要加1
            const day = ('0' + date.getDate()).slice(-2);
            return `${year}-${month}-${day}`;
        }

        function loadData(pageNumber, pageSize) {
            $.ajax({
                url: '/getAllAir',
                method: 'get',
                data: { page: pageNumber, size: pageSize },
                dataType: 'json',
                success: function (response) {
                    if (!response.success) {
                        alert(`获取数据失败：${response.message}`);
                        return;
                    }

                    const pageInfo = response.data; // 直接使用 pageInfo 对象
                    const data = pageInfo.list;
                    const totalPages = pageInfo.pages;
                    const currentPage = pageInfo.pageNum;

                    renderTable(data, currentPage, totalPages);
                },
                error: function (xhr, status, error) {
                    alert('数据加载失败: ' + error);
                    console.error('AJAX 请求失败:', error);
                }
            });
        }

        // 加载第一页数据
        loadData(1, 5);

        // 添加事件监听器
        $('#first-page').click(function () {
            loadData(1, 5);
        });

        $('#prev-page').click(function () {
            const currentPage = parseInt($('#current-page').text());
            if (currentPage > 1) {
                loadData(currentPage - 1, 5);
            }
        });

        $('#next-page').click(function () {
            const currentPage = parseInt($('#current-page').text());
            const totalPages = parseInt($('#total-pages').text());
            if (currentPage < totalPages) {
                loadData(currentPage + 1, 5);
            }
        });

        $('#last-page').click(function () {
            const totalPages = parseInt($('#total-pages').text());
            loadData(totalPages, 5);
        });
    });
</script>
</body>
</html>